<template>
    <div id="searchPage">
        <label>
            <input placeholder="请输入歌曲名" v-model="input">
            <button @click="searchSong">搜索</button>
        </label>
        <ul v-for="(item, index) in songs" :key="index">
            <li>{{ item }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input:'',
            songs:[1,2,3]
        }
    },
    methods: {
        searchSong(){
            if(this.input != ''){
                console.log(this.input)
            }
        }
    },
}
</script>
<style lang="less">
label{
    margin-top: 30px;
    input {
        width: 80%;
        height: 40px;
        font-size: 18px;
    }
    button{
        width: 20%;
        height: 40px;
        font-size: 18px;
        border: 0px;
        background-color: #fff
    }
}
ul li{
    list-style: none;
    width: 96%;
    margin-left: 2%;
    height: 40px;
    line-height: 40px;
    padding: 2px;
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    border-right: none
}
    
</style>